<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    
    <title>多层表头测试</title>
<link type="text/css" rel="Stylesheet" href="lock.css" mce_href="lockedheaders.css" />
<mce:style type="text/css"><!--
    tr { height: 26px; }
    td         { font-size: 10pt; text-align: right; }
    td.Locked  { font-size: 10pt; }
    td.HLocked { font-size: 10pt; }
    td.VLocked { font-size: 10pt; }
    
--></mce:style><style type="text/css" mce_bogus="1">    tr { height: 26px; }
    td         { font-size: 10pt; text-align: right; }
    td.Locked  { font-size: 10pt; }
    td.HLocked { font-size: 10pt; }
    td.VLocked { font-size: 10pt; }
    </style>
</head>
<body>
<div id="DivContainer" style="width: 400px; height: 260px;">
<table id = "Report">
    <tbody id="tbody">
  <tr>
    <td class="Locked" colspan="4">Column1</td>
    
    <td class="VLocked" rowspan="3">Column5</td>
    <td class="VLocked" rowspan="3">Column6</td>
    <td class="VLocked" rowspan="3">Column7</td>
    <td class="VLocked" rowspan="3">Column8</td>
  </tr>
  <tr>
    <td class="Locked" colspan="2">Column11</td>
    <td class="Locked" colspan="2">Column12</td>
  </tr>
  <tr>
    <td class="Locked">Column111</td>
    <td class="Locked">Column112</td>
    <td class="Locked">Column121</td>
    <td class="Locked">Column122</td>
  </tr>
<!--上面是表列头部分 -->
  <tr>
    <td class="HLocked">Row01</td>
    <td class="HLocked">Row01A</td>
    <td class="HLocked">Row01B</td>
    <td class="HLocked">11</td>
    
    <td style="text-align: center" mce_style="text-align: center">12</td>
    <td style="text-align: left" mce_style="text-align: left">13</td>
    <td style="text-align: right" mce_style="text-align: right">14</td>
    <td>15</td>
  </tr>
  <tr>
    <td class="HLocked">Row02</td>
    <td class="HLocked">Row02A</td>
    <td class="HLocked">Row02B</td>
    <td class="HLocked">21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
  </tr>
  <tr>
    <td class="HLocked">Row03</td>
    <td class="HLocked">Row03A</td>
    <td class="HLocked">Row03B</td>
    <td class="HLocked">31</td>
    <td>32</td>
    <td>33</td>
    <td>34</td>
    <td>35</td>
  </tr>
  <tr>
    <td class="HLocked">Row04</td>
    <td class="HLocked">Row04A</td>
    <td class="HLocked">Row04B</td>
    <td class="HLocked">41</td>
    <td>42</td>
    <td>43</td>
    <td>44</td>
    <td>45</td>
  </tr>
  <tr>
    <td class="HLocked">Row05</td>
    <td class="HLocked">Row05A</td>
    <td class="HLocked">Row05B</td>
    <td class="HLocked">51</td>
    <td>52</td>
    <td>53</td>
    <td>54</td>
    <td>55</td>
  </tr>
  <tr>
    <td class="HLocked">Row06</td>
    <td class="HLocked">Row06A</td>
    <td class="HLocked">Row06B</td>
    <td class="HLocked">61</td>
    <td>62</td>
    <td>63</td>
    <td>64</td>
    <td>65</td>
  </tr>
  <tr>
    <td class="HLocked">Row07</td>
    <td class="HLocked">Row07A</td>
    <td class="HLocked">Row07B</td>
    <td class="HLocked">71</td>
    <td>72</td>
    <td>73</td>
    <td>74</td>
    <td>75</td>
  </tr>
  <tr>
    <td class="HLocked">Row08</td>
    <td class="HLocked">Row08A</td>
    <td class="HLocked">Row08B</td>
    <td class="HLocked">81</td>
    <td>82</td>
    <td>83</td>
    <td>84</td>
    <td>85</td>
  </tr>
  <tr>
    <td class="HLocked">Row09</td>
    <td class="HLocked">Row09A</td>
    <td class="HLocked">Row09B</td>
    <td class="HLocked">91</td>
    <td>92</td>
    <td>93</td>
    <td>94</td>
    <td>95</td>
  </tr>
</tbody>
</table>
</div>
<div>
    <input type="button" value="test" onclick="test()" />
    <input type="button" value="test2" onclick="test2()" />
    INFO: <div style="background: blue; color: white; font-weight: bold;" id="info"></div>
</div>

<div id="test-el" style="width:400px;height:300px;"></div>
<div id="test-el2" style="width:400px;height:300px;"></div>

</div>


        <script type="text/javascript">


            function test() {
                var testEl = document.getElementById('test-el');


                var html = [
                    '<table>',
                    '    <tbody>',
                    '  <tr>',
                    '    <td class="Locked" colspan="4">Column1</td>',
                    '    ',
                    '    <td class="VLocked" rowspan="3">Column5</td>',
                    '    <td class="VLocked" rowspan="3">Column6</td>',
                    '    <td class="VLocked" rowspan="3">Column7</td>',
                    '    <td class="VLocked" rowspan="3">Column8</td>',
                    '  </tr>',
                    '  <tr>',
                    '    <td class="Locked" colspan="2">Column11</td>',
                    '    <td class="Locked" colspan="2">Column12</td>',
                    '  </tr>',
                    '  <tr>',
                    '    <td class="Locked">Column111</td>',
                    '    <td class="Locked">Column112</td>',
                    '    <td class="Locked">Column121</td>',
                    '    <td class="Locked">Column122</td>',
                    '  </tr>'
                ];

                for (var i = 0; i < 500; i ++) {
                    html.push(
                        '  <tr>',
                        '    <td class="HLocked">Row09</td>',
                        '    <td class="HLocked">Row09A</td>',
                        '    <td class="HLocked">Row09B</td>',
                        '    <td class="HLocked">91</td>',
                        '    <td>92</td>',
                        '    <td>93</td>',
                        '    <td>94</td>',
                        '    <td>95</td>',
                        '  </tr>'
                    );
                }

                html.push('</tbody></table>');

                var ddd = new Date();                
                testEl.innerHTML = html.join('');

                log('=================== olap-table init start] ' + ((new Date()).getTime() - ddd));
            }

            function test2() {
                var testEl = document.getElementById('test-el2');

                var ddd = new Date();   

                var id = ddd.getTime();

                var html = [
                    '<table>',
                    '    <tbody id="', id ,'">',
                    '  <tr>',
                    '    <td class="Locked" colspan="4">Column1</td>',
                    '    ',
                    '    <td class="VLocked" rowspan="3">Column5</td>',
                    '    <td class="VLocked" rowspan="3">Column6</td>',
                    '    <td class="VLocked" rowspan="3">Column7</td>',
                    '    <td class="VLocked" rowspan="3">Column8</td>',
                    '  </tr>',
                    '  <tr>',
                    '    <td class="Locked" colspan="2">Column11</td>',
                    '    <td class="Locked" colspan="2">Column12</td>',
                    '  </tr>',
                    '  <tr>',
                    '    <td class="Locked">Column111</td>',
                    '    <td class="Locked">Column112</td>',
                    '    <td class="Locked">Column121</td>',
                    '    <td class="Locked">Column122</td>',
                    '  </tr>',
                    '   </tbody>',
                    '   </table>'
                ];

                testEl.innerHTML = html.join('');
                var tbody = document.getElementById(id);

                for (var i = 0, tr, td, tx; i < 500; i ++) {
                    tr = document.createElement('tr');
                    for (var j = 0; j < 4; j ++) {
                        td = document.createElement('td');
                        td.className = 'HLocked';
                        tr.appendChild(td);
                        // td.innerHTML = 'asdf';
                        tx = document.createTextNode('adf');
                        td.appendChild(tx);
                    }
                    for (var j = 4; j < 8; j ++) {
                        td = document.createElement('td');
                        tr.appendChild(td);
                        // td.innerHTML = i + j;
                        tx = document.createTextNode(j + i);
                        td.appendChild(tx);
                    }
                    tbody.appendChild(tr);
                }

                html.push('</tbody></table>');

                log('=================== olap-table init start2] ' + ((new Date()).getTime() - ddd));
            }            

            var infoEl = document.getElementById('info');

            function log(msg) {
                infoEl.innerHTML = msg;
            }


        </script>

</body>
</html>